<script setup>
import {ref} from 'vue'
import MissionCenter from "./MissionCenter/MissionCenter.vue";
import MissionUp from "./MissionUp/MissionUp.vue";
import MissionDown from "./MissionDown/MissionDown.vue";

// 对话框
const openMissionDialog = ref(false)
// 调整对话框的margin-top
const customTop = ref('1vh');
</script>

<!--Mission Editor主页面-->
<!--主题内容包含上中下三部分组件-->
<!--MissionUp、MissionCenter、MissionDown-->
<template>
  <div id="MissionEditor">
    <el-button @click="openMissionDialog = true">
      Mission
    </el-button>

    <el-dialog v-model="openMissionDialog"
               title="Mission Editor"
               width="80%"
               draggable
               :top="customTop">

      <!--      主体内容-->
      <!--      上半部分-->
      <MissionUp/>

      <!--      中间部分-->
      <MissionCenter/>

      <!--      下半部分-->
      <MissionDown/>
    </el-dialog>

  </div>
</template>

<style>
#MissionEditor {
height: 100%;
}


.el-dialog {
  background-color: #3c3f41;
}

.el-dialog span {
  color: white;
}

</style>
